import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:sports_new/resources/colours.dart';

class LadderTab extends StatelessWidget {
  const LadderTab({super.key,
    required this.child,
    required this.place,
    required this.height,
    required this.color,
    this.keepSize = true,
    required this.scrollable});
  final Widget child;
  final TabPlace place;
  final double height;
  final Color color;
  final bool keepSize;
  final bool scrollable;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: height,
      child: Stack(
        children: [
          Positioned.fill(
            right: place == TabPlace.end?height*6/7-1:height*3/7*2-0.5,
            left: place == TabPlace.start?height*6/7-15:height*3/7*2-0.5,
            child: Container(color: color),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              if(color != Colours.transparent || keepSize)
              if(place == TabPlace.start)...[
                ClipRRect(
                  borderRadius: const BorderRadius.only(topLeft: Radius.circular(8)),
                  child: Container(
                    width: height*3/7,
                    height: height,
                    decoration: BoxDecoration(
                      color: color,
                      border: Border.all(color: color,width: 0)
                    ),
                  ),
                )
              ]else...[
                SizedOverflowBox(
                  alignment: Alignment.topRight,
                  size: Size(height*6/14, height),
                  child: LadderSide(
                    reverse: true,
                    child: Container(
                      width: height*6/7,
                      height: height,
                      decoration: BoxDecoration(
                        color: color,
                        border: Border.all(color: color,width: 0)
                      ),
                    )
                  ),
                )
              ],
              if(scrollable)
              Flexible(
                child: Container(
                  height: height,
                  decoration: BoxDecoration(
                    color: color,
                    border: Border.all(color: color,width: 0)
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [child]
                  )
                ),
              ),
              if(!scrollable)
                Expanded(
                  child: Container(
                    height: height,
                    decoration: BoxDecoration(
                        color: color,
                        border: Border.all(color: color,width: 0)
                    ),
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [child]
                    )
                  ),
                ),
              if(color != Colours.transparent || keepSize)
              if(place == TabPlace.end)...[
                ClipRRect(
                  borderRadius: const BorderRadius.only(topRight: Radius.circular(8)),
                  child: Container(
                    width: height*3/7,
                    height: height,
                    decoration: BoxDecoration(
                      color: color,
                      border: Border.all(color: color,width: 0)
                    ),),
                )
              ]else...[
                LadderSide(
                  reverse: false,
                  child: Container(
                    width: height*6/7,
                    height: height,
                    decoration: BoxDecoration(
                      color: color,
                      border: Border.all(color: color,width: 0)
                    )
                  )
                )
              ],
            ],
          ),
        ],
      ),
    );
  }
}

class LadderSide extends StatelessWidget {
  const LadderSide({super.key, required this.child, required this.reverse});
  final Widget child;
  final bool reverse;

  @override
  Widget build(BuildContext context) {
    return ClipPath(
        clipper: LadderPath(reverse),
        child: child);
  }
}

class LadderPath extends CustomClipper<Path> {
  final bool reverse;

  LadderPath(this.reverse);

  @override
  Path getClip(Size size) {
    var x = size.height*6/7;
    var y = size.height;
    var path = Path();
    var dot = 1/4;
    if(reverse) {
      path.moveTo(x, 0);
    }
    path.quadraticBezierTo(point(x, x*dot), 0, x/2, y/2);
    path.quadraticBezierTo(point(x, x*(1-dot)), y, point(x, x), y);
    path.lineTo(point(x, 0), y);
    path.close();
    return path;
  }

  double point(double x,double point) => reverse?x-point:point;

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => true;
}

class TabPlace{
  final int i;
  TabPlace(this.i);

  static TabPlace start = TabPlace(0);
  static TabPlace middle = TabPlace(1);
  static TabPlace end = TabPlace(2);
}
